import React, {useEffect} from 'react'
import { Card, Col, Row, List, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import * as Echarts from 'echarts'

const { Meta } = Card;
export default function Home() {
  useEffect(() => {
     // 基于准备好的dom，初始化echarts实例
     var myChart = Echarts.init(document.getElementById('main'));

     // 指定图表的配置项和数据
     var option = {
       title: {
         text: 'ECharts 入门示例'
       },
       tooltip: {},
       legend: {
         data: ['销量']
       },
       xAxis: {
         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
       },
       yAxis: {},
       series: [
         {
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
         }
       ]
     };

     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
  }, [])
  const data = [
    {
      title: 'Ant Design Title 1',
    },
    {
      title: 'Ant Design Title 2',
    },
    {
      title: 'Ant Design Title 3',
    },
    {
      title: 'Ant Design Title 4',
    },
  ];

  return (
    <div className="site-card-wrapper">
    <Row gutter={16}>
      <Col span={8}>
        <Card title="Card title">
          <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
          title={<a href={`#/news-manage/preview/${1}`}>{item.title}</a>}
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        />
      </List.Item>
    )}
  />
        </Card>
      </Col>
      <Col span={8}>
        <Card title="Card title">
        <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
          title={<a href={`#/news-manage/preview/${1}`}>{item.title}</a>}
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        />
      </List.Item>
    )}
  />
        </Card>
      </Col>
      <Col span={8}>
      <Card
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
      title="Card title"
      description="This is the description"
    />
  </Card>
      </Col>
    </Row>
      <div id="main" style={{width: '600px',height: '400px'}}></div>

  </div>
  )
}
